<script setup lang="ts">
import { MapItemLink } from '@/map-item'
import { LengthUnit, meter2strWithUnit } from '@/widgets'
import type { Waypoint } from '../../waypoint'
import { airportMapItem } from '../../airport'
import { showWaypointRoutingTable } from '../util'
import { routingMapItem } from '../map-item'
import { getWaypointRoutingInfoList } from './routing-info'

const props = defineProps<{ type: string; item: Waypoint }>()
const routings = getWaypointRoutingInfoList(props.item.id)
const routings2 = routings.slice(0, 5)
const lengthFn = (m: number) => meter2strWithUnit(m, LengthUnit.KM, 1)
</script>
<template>
  <div class="wpt-routing-lst pane-block">
    <template v-if="routings && routings.length > 0">
      <div class="map-block-header">
        <div>飞行路线({{ routings.length }})</div>
      </div>
      <div class="row">
        <div class="col-7em">id</div>
        <div class="col-6em">起飞机场</div>
        <div class="col-6em">落地机场</div>
        <div class="col-6em">航路点数</div>
        <div class="col-6em">长度</div>
      </div>
      <div class="row" v-for="r in routings2">
        <MapItemLink class="col-7em" :txt="r.id" :item="routingMapItem" />
        <MapItemLink
          v-if="r.departureAirport"
          class="col-6em"
          :txt="r.departureAirport"
          :item="airportMapItem"
        />
        <div v-else class="col-6em">-</div>
        <MapItemLink
          v-if="r.arrivalAirport"
          class="col-6em"
          :txt="r.arrivalAirport"
          :item="airportMapItem"
        />
        <div v-else class="col-6em">-</div>
        <div class="col-6em">{{ r.segmentList.length + 1 }}</div>
        <div class="col-6em">{{ lengthFn(r.length) }}</div>
      </div>
      <div class="row" v-if="routings.length > 5">
        <div class="map-hover" @click="showWaypointRoutingTable(item.id)">显示更多...</div>
      </div>
    </template>
    <div v-else class="row">飞行路线(0)</div>
  </div>
</template>
